<template>
	<wsPage title="退款详情">
		<div slot="page_operate">
			<Button  @click="goBack"><Icon type="android-close"></Icon><span>关闭</span></Button>
		</div>
		<div style="width:80%;margin:0 auto;padding:20px 0;">
			<Steps :current="current">
		        <Step title="退款中" content=""></Step>
		        <Step :title="merchantTitle" :status="merchantStatus" content=""></Step>
		        <Step :title="platformTitle" :status="platformStatus" content=""></Step>
		    </Steps>
		</div>
		<!-- 订单信息 -->
		<Tabs type="card" @on-click="queryOrder">
			<TabPane label="退款信息" name="0">
				<Row>
				 	<Col span="24">
		                <div class="layout-content">
		                	<Col span="24" class="layout-content-main">
		                		<Col span="12">
									<Col span="8" class="layout-content-title">
										用户账号：
									</Col>
									<Col>
										{{orderRefundForm.loginName}}
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										退款单号：
									</Col>
									<Col>
										{{orderRefundForm.sn}}
									</Col>
								</Col>
							</Col>
							<Col span="24" class="layout-content-main">
		                		<Col span="12">
									<Col span="8" class="layout-content-title">
										订单编号：
									</Col>
									<Col>
										{{orderRefundForm.orderSn}}
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										运单号：
									</Col>
									<Col>
										{{orderRefundForm.trackingNo}}
									</Col>
								</Col>
							</Col>
							<Col span="24" class="layout-content-main">
								<Col span="12">
									<Col span="8" class="layout-content-title">
										退款金额：
									</Col>
									<Col>
										{{orderRefundForm.amount}}
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										退款类型：
									</Col>
									<Col>
										{{orderRefundForm.refundType == 1?"退款":"退货"}}
									</Col>
								</Col>
							</Col>
							<Col span="24" class="layout-content-main">
		                		<Col span="12">
									<Col span="8" class="layout-content-title">
										创建日期：
									</Col>
									<Col>
										{{orderRefundForm.createDate}}
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										修改时间：
									</Col>
									<Col>
										{{orderRefundForm.updateDate}}
									</Col>
								</Col>
							</Col>
							<Col span="24" class="layout-content-main">
		                		<Col span="12">
									<Col span="8" class="layout-content-title">
										退货原因：
									</Col>
									<Col>
										{{checkReason(orderRefundForm.reason)}}
									</Col>
								</Col>
								<Col span="12">
									<Col span="8" class="layout-content-title">
										所属商户：
									</Col>
									<Col>
										{{orderRefundForm.tenantName}}
									</Col>
								</Col>
							</Col>
							<Col span="24" class="layout-content-main">
								<Col span="4" class="layout-content-title">
									退款备注：
								</Col>
								<Col>
									{{orderRefundForm.memo}}
								</Col> 
							</Col>
		                </div>
		            </Col>
				</Row>
			</TabPane>
		</Tabs>
	</wsPage>
</template>

<script>
	export default {
		data() {
    		return {
    			queryForm: {
    				orderId: ''
    			},
    			current: 0,
    			orderRefundForm:{},
    			id:'',
    			merchantTitle: '',
    			platformTitle: '',
    			merchantStatus: 'wait',
    			platformStatus: 'wait'
    		}
    	},
    	mounted: function () {
    		this.id = this.$route.query.id;
    		this.queryOrder();
    	},
    	methods: {
    		/**
    		* 查询退款信息
    		*/
    		queryOrder(){
    			this.activeIndex = 0;
    			const _this = this;
    			this.axios.get('/ws/ms/orderRefunds/' + this.id).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						var data=res.data;
						_this.orderRefundForm= data;
						var status = _this.orderRefundForm.status;
						_this.initStep(status);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
    		},
    		initStep(status){
    			var title = '';
    			const _this = this;
				if(status == 1){
					_this.current = 0;
					_this.merchantTitle = '商家审核';
					_this.platformTitle = '平台审核';
				}
				if(status == 2||status == 3){
					_this.current = 1;
					title = status == 2? '成功':'失败';
					_this.merchantStatus = status == 2?'process':'error';
					_this.merchantTitle = '商家审核' + title;
					_this.platformTitle = '平台审核';
				}
				if(status == 4||status == 5){
					_this.current = 2;
					title = status == 4? '成功':'失败';
					_this.platformTitle = '平台审核' + title;
					_this.merchantTitle = '商家审核成功';
					_this.platformStatus = status == 4?'process':'error';
					_this.merchantStatus = 'finish'
				}
    		},
    		checkReason(reason){
    			if(reason == 1) return "多拍|错拍|不想拍";
    			if(reason == 2) return "缺货";
    			if(reason == 3) return "质量问题";
    		},
			/**
			 * 返回
			 */
    		goBack() {
    			// this.$router.push({path: '/refund'});
    			this.$router.push({name:'ops_refund_list'});
    		}
    	}
	}
</script>
<style type="">
	.m1 {
		font-size: 18px;
	}
	.layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 20px;
        float:left;
        justify-content: space-around;
        font-size:14px;
    }
    .layout-content-title {
    	text-align: right;
    	margin-right: 20px;
	}
    .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 100px;
	    height: 100px;
	    line-height: 100px;
	    text-align: center;
	}
	.avatar {
	    width: 100px;
	    height: 100px;
	    display: block;
	}
	.time{
        font-size: 14px;
        font-weight: bold;
    }
    .content{
        padding-left: 5px;
    }
    .timeline{
    	height:80px;
    }
    .express{
    	margin-top: 1%;
    }
	.ivu-steps .ivu-steps-head {
	    background: #F8F8F9 !important;
	}
	.ivu-steps .ivu-steps-title {
	    background: #F8F8F9 !important;
	}
	.ivu-steps-item.ivu-steps-status-wait .ivu-steps-head-inner {
	    background-color: #F8F8F9 !important;
	}
</style>
